{% extends "layouts/base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %} Borrow Records {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'assets/css/jquery-ui.min.css'%}">
<link rel="stylesheet" href="{% static 'assets/css/jquery.datetimepicker.css'%}">
{% endblock stylesheets %}


{% block content %}

<div class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="main-body">
            <div class="page-wrapper">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-header">
                                <h5>Add New Record</h5>
                            </div>
                            <div class="card-block table-border-style">
                                <form method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                   {{form | crispy}}
                                   {{form.media}}
                                    <button type="submit" class="btn btn-success">Add</button>
                                    <a href="{% url 'record_list' %} " class="btn btn-secondary">Cancel</a>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script src="{% static 'assets/plugins/jquery/js/jquery-1.12.4.min.js' %}"></script>
<script src="{% static 'assets/plugins/jquery/js/jquery-ui.min.js' %}"></script>
<script src="{% static 'assets/plugins/jquery/js/jquery.datetimepicker.js' %}"></script>

<script>
$( function() {
$( "#id_borrower" ).autocomplete({
  source: "{% url 'auto_member_name' %}",
});

$( "#id_book" ).autocomplete({
  source: "{% url 'auto_book_name' %}",
});

// $("#id_start_day").datetimepicker( {
//     //    format:'Y-m-d H:i',
//     // dateFormat: "yy-mm-dd H:i:ss"
    
//   });

//  $("#id_end_day").datetimepicker();

//  $(".datepicker").datepicker(
//     {
//         dateFormat: "yy-mm-dd",
//         changeYear:true,
//         changeMonth:true,
//   }
//  )

} );
</script>

{% endblock javascripts %}
